import Vuex from 'vuex'
import Vue from 'vue'

// mutations对象导入
import mutations from './mutations'
// getters对象导入
import getters from './getters'
// actions对象导入
import actions from './actions'
// 导入moduleA
import moduleA from './modules/moduleA'

// 1. 安装vuex
Vue.use(Vuex)

// state对象
const state = {
  counter: 1000,
  students: [
    {id: 110, name: "chen", age: 2},
    {id: 111, name: "xiao", age: 10},
    {id: 112, name: "fang", age: 20},
    {id: 113, name: "shan", age: 30},
  ],
  info: {
    // 这里所有的属性都会被加入到响应式系统中 前提：属性已经定义好了，否则无法存入到响应式系统中
    // Dep 观察者 观察是否存在变化，如果监听变化了，通知所有对应需要改变的地方进行改变
    name : 'kobe',
    age: 40,
    height: 1.98
  }
}



// 2. 创建Vuex对象: 单一状态数\数据源
// 好处：方便后期管理维护
const store = new Vuex.Store({
  // 保存共享状态 Devtools浏览器插件 记录行为
  // 修改状态步骤：Vue Components(Vue组件) --Dispatch(分发)--> Actions(行为，异步操作) --commit(提交)--> mutations(同步操作 ) 
  state,
  // 处理同步操作
  mutations,
  // 异步操作处理
  actions,
  // 类似计算属性：需要缓存多次调用的时候
  getters,
  modules: {
    a: moduleA
  }
})

// 3. 导出Vux对象
export default store 


